<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { exportFile } from '@/utils/common.js';
import { ElMessage,ElMessageBox  } from 'element-plus';
import{ PromoterDetail } from '@/api/ExtensionManage/index.js'
import TopBar from '@/components/Topbar/index.vue'
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();


const tabName = ref('')
const backValue = ref('ExtensionPerManageIndex')
// 新增编辑回退时候刷新列表
onActivated(()=>{
    tabName.value =`${route.query.referrerName}的推广详情` || '推广详情'
    seachTable.value.initSearch()
})
const formInline = ref([

    {
      type: "input",
      prop: "queryMember",
      placeholder: "会员姓名或手机号",
      label: "",
      model: "",
      width:180
    },
    {
      type: "datePicker",
      prop: ["queryStartRegisterTime", "queryEndRegisterTime"],
      startPlaceholder: "注册开始时间",
      endPlaceholder: "注册结束时间",
      label: "",
      model: [],
    },
    {
      type: "datePicker",
      prop: ["queryStartPayTime", "queryEndPayTime"],
      startPlaceholder: "下单开始时间",
      endPlaceholder: "下单结束时间",
      label: "",
      model: [],
    },
])

const btnLefts = ref([
    {
        label:"导出",
        plain:false,
        type:"primary",
        show:true,
        plain:true,
        img:new URL("@/assets/icon/btn-export.png",import.meta.url),
        style:"border-color:#0C268C;color:#0C268C",
        click:async ()=>{
            const loading = ElLoading.service({
                lock: true,
                text: '导出中',
                background: 'rgba(255, 255, 255, 0.7)',
            })
            try{
              await exportFile(`/jy-member/member/referrer/detailsExport`,'post',`推广详情`,{},searchData.value)
              loading.close()
            }catch(e){
              loading.close()
            }
        }
    },
])
const btnRights = ref([

])

const tableConfig = ref([
    {
      prop: "userName",
      label: "会员姓名",

    },
    {
      prop: "phone",
      label: "会员手机号",

    },
    {
      prop: "storeName",
      label: "注册门店",

    },
    {
      prop: "registerTime",
      label: "注册时间",

    },
    {
      prop: "orderNo",
      label: "销售订单",

    },
    {
      prop: "orderState",
      label: "订单状态",

    },
    {
      prop: "payAmount",
      label: "消费金额",
 
    },
    {
      prop: "payTime", 
      label: "下单时间",
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);
const searchData = ref({})

const handlerSearch = async (formInline)=>{
    
    tableLoading.value = true;
    try{
        let data = {
            ...formInline,
            referrerId:route.query.id
        }
        searchData.value = data
        const res = await PromoterDetail(data)
        console.log(res,'res');
        totalPage.value = res.total || 0;
        tableData.value = res.records || [];
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}

// const childrenData = ref([]);
// const expandLoading = ref([]);

// const expandChange = (row)=>{
//     let tableIndex = tableData.value.findIndex(value=>{
//         return value.uuid  == row.uuid;
//     })
//     expandLoading.value[tableIndex] = true;
//     setTimeout(()=>{
//         childrenData.value[tableIndex] = [
//             {
//                 "doctorNumberCode": "YS000299",
//                 "type": "审方",
//                 "name": "12313",
//                 "mobile": "18207123212",
//                 "idCard": "",
//                 "frontUrl": "https://static.91medicine.net/images/20230919/2930e77d-fba7-4a7e-bbc4-f6815eca5a6d.jpg",
//                 "headUrl": "https://static.91medicine.net/images/20230919/f6159f8e-c44a-43cc-ae5c-3ddfc659cd7a.jpg",
//                 "introduce": "3123",
//                 "institutions": "九为（浙江）网络科技有限公司",
//                 "certificateUrl": "https://static.91medicine.net/images/20230919/d5e597c3-1c76-4646-a843-03b0b8686a03.jpg",
//                 "certificateNo": "312312",
//                 "titleValue": "",
//                 "uuid": "8a69c4628aab7785018aac0eb31f0004",
//                 "state": 1,
//                 "sfdaDoctorType": "1",
//                 "storeLocationUuid": "",
//                 "source": "3"
//             },
//         ]
//         expandLoading.value[tableIndex] = false;
//     })
// }

</script>
<template>
    <div class="page-content">
        <TopBar ref="topBar" :backValue="backValue" :tabName="tabName"></TopBar>
        <div class="search-outview">

      
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
          :tableExpand="false"
          @expandChange="expandChange"
        >
            <!-- <template #expandSlot="{ row,index }">
                <div v-loading="expandLoading[index]" style="width:100%;box-sizing:border-box;padding:0 12px;">
                    <div class="expand-lis">
                        <div class="name">
                            维浴药浴包(腿足包/坐浴包/手肘包/膝盖包)
                        </div>
                        <div class="num">
                            X2
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                商品单价
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                商品小计
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                优惠金额
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>  
                        <div class="price" style="width:210px">
                            <div class="p-name">
                                优惠类型
                            </div>
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top-start"
                                popper-class="handlerTab_tooltip"
                              >
                                <template #content>
                                 <div class="tool-tips-text"> 312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊</div>
                                 
                                </template>
                                 <div class="p-label">
                                    312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊
                                </div>
                              </el-tooltip>
                        </div>
                        <div class="price" style="width:150px">
                            <div class="p-name">
                                核销时间
                            </div>
                            <div class="p-label">
                                2023-09-21 18:56:15
                            </div>
                        </div>
                        <div class="btn-status" style="background:#FFAB00">
                            待核销
                        </div>
                    </div>
                    <div class="expand-lis">
                        <div class="name">
                            维浴药浴包(腿足包/坐浴包/手肘包/膝盖包)
                        </div>
                        <div class="num">
                            X2
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                商品单价
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                商品小计
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>
                        <div class="price" style="width:120px">
                            <div class="p-name">
                                优惠金额
                            </div>
                            <div class="p-value">
                                50.00
                            </div>
                        </div>  
                        <div class="price" style="width:210px">
                            <div class="p-name">
                                优惠类型
                            </div>
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top-start"
                                popper-class="handlerTab_tooltip"
                              >
                                <template #content>
                                 <div class="tool-tips-text">312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊</div>
                                 
                                </template>
                                 <div class="p-label">
                                    312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊312312312312321312321312312aaa啊啊啊
                                </div>
                              </el-tooltip>
                              
                        </div>
                        <div class="price" style="width:150px">
                            <div class="p-name">
                                核销时间
                            </div>
                            <div class="p-label">
                                2023-09-21 18:56:15
                            </div>
                        </div>
                        <div class="btn-status" style="background:#18BF5B">
                            待核销
                        </div>
                    </div>
                </div>
            </template> -->
        </SeachTable>
    </div>
    </div>
</template>
<style lang="less" scoped>
.expand-lis{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding:8px 12px;
    margin-bottom:12px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // &:last-child{
    //     margin-bottom: 12px;
    // }
    .name{
        color:#000000;
        width: 200px;
        line-height: 21px;
        word-break: break-all;
        word-wrap: break-word;
        font-size: 14px;
    }
    .num{
        color:#222222;
        width: 40px;
        line-height: 14px;
        word-break: break-all;
        word-wrap: break-word;
        font-size: 14px;
    }
    .price{
        width: 40px; 
        .p-name{
            width: 100%;
            font-size: 12px;
            color: #222222;
            line-height: 12px;
        }
        .p-value{
            width: 100%;
            font-size: 16px;
            color: #FF2440;
            line-height: 16px;
            margin-top:6px;
        }
        .p-label{
            width: 100%;
            font-size: 14px;
            color: #222;
            line-height: 14px;
            margin-top:6px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    .btn-status{
        width: 44px;
        height: 20px;
        font-size: 12px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}
:deep(.line-block){
    display: none;
}

// :deep(.el-popper){
//   :deep(.el-popper__arrow){
//     &::before{
//               background: #000 !important;
//             }
//   }
           
          
// }

.search-outview{
   height: calc(100% - 48px); 
}

</style>

<style lang="less">
    // tooltips箭头样式修改


    
  
// .handlerTab_tooltip.is-dark{
//         width: 216px;
//         opacity: 0.75 !important;
//         background-color: #000 !important;
//         box-sizing: border-box !important;
//         box-shadow: 0 2px 8px 0 #00000026 !important;
//         border-radius: 4px !important;
//         .tool-tips-text{
//           word-wrap: break-word;
//           word-break: break-all;
//         }
        
// }
</style>